
<!-- eslint-disable vue/multi-word-component-names -->
 
<template>
  
    <div class="box">
        <div class="chat_top">
            <router-link to="Consultation">
              <span> <img @click="goBack" class="hui"  src="../../assets/icon/hdpi/fh.png" alt=""></span>
            </router-link>
            <h3>迪丽热巴</h3>
        </div>
        <div class="chat_center">
            <ul class="nei">
                <li v-for="chat in chats" :key="chat.id">
                    <img :src="getAvatarUrl(chat.avatar)" alt="头像" width="30" height="30" class="liao-img"/>
                    <span class="liao-xin">{{ chat.message }}</span>
                    <!-- 显示发送时间 -->
                    <span class="shijian">{{ formatTime(chat.timestamp) }}</span>
                </li>
            </ul>
        </div>
        <div class="fa">
            <img src="../../assets/images/yuyin.png" alt="" class="yuyin">
            <input type="text" class="shu" v-model="message"/>
            <button class="song" @click="sendMessage">发送</button>
            <img src="../../assets/images/biaoqing.png" alt="" class="xiao">
            <img src="../../assets/images/tupian.png" alt="" class="xiang">
        </div>
    </div>
    

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'; 

    const router = useRouter(); 
function goBack() {  
      // 使用router.go(-1)模拟浏览器的后退操作  
      router.go(-1);  
    } 
// 模拟头像数据，这里列出了可用的头像图片文件名
const avatars = [
  'doctor_avatar.png',
  'doctor.png',
];

// 定义消息数据，使用 ref 创建响应式数据
const chats = ref([]);
const message = ref('');

// 发送消息的函数
const sendMessage = () => {
  // 如果输入的消息不为空（去除两端空格后判断）
//   if (message.value.trim()) {
//     // 创建一个新的聊天对象
//     const newChat = {
//       id: Date.now(),
//       // 将输入的消息文本作为消息内容
//       message: message.value,
//       // 从 avatars 数组中随机选择一个头像文件名作为头像
//       avatar: avatars[Math.floor(Math.random() * avatars.length)],
//       // 记录发送时间戳
//       timestamp: Date.now(),
//     };
//     // 将新的聊天对象添加到 chats 数组中
//     chats.value.push(newChat);
//     // 清空输入框
//     message.value = '';
//   }
};



// 根据头像文件名生成对应的 URL 的函数
const getAvatarUrl = (avatarFileName: string) => {
  // 假设头像图片存储在 public 目录下的 images 文件夹中
  // 返回对应的 URL 路径格式，以便在页面中正确显示头像
  return `/images/${avatarFileName}`;
};



// 格式化时间函数
const formatTime = (timestamp: number) => {
  // 根据时间戳创建一个日期对象
  const date = new Date(timestamp);
  // 获取年份
  const year = date.getFullYear();
  // 获取月份（注意月份从 0 开始计数，所以需要加 1）并进行格式化（如果小于 10 前面补 0）
  const month = String(date.getMonth() + 1).padStart(2, '0');
  // 获取日期并进行格式化（如果小于 10 前面补 0）
  const day = String(date.getDate()).padStart(2, '0');
  // 获取小时并进行格式化（如果小于 10 前面补 0）
  const hours = String(date.getHours()).padStart(2, '0');
  // 获取分钟并进行格式化（如果小于 10 前面补 0）
  const minutes = String(date.getMinutes()).padStart(2, '0');
  // 返回格式化后的时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};




</script>
<style>
.box{
        width: 100%;
        height: 100%;
        margin-left: -30px;
        margin-top: -20px;
        .chat_top{
            width: 100%;
            height: 40px;
            border-bottom: solid 1px #cfcccc;
            position: relative;
            .fanhui{
                width: 25px;
                height: 25px;
                margin: 5px 10px;
            }
            h3{
                position: absolute;
                top: 3px;
                left: 150px;
                font-weight: 600;
            }
            .geng{
                width: 30px;
                height: 30px;
                position: absolute;
                right: 10px;
            }
        }
        .chat_center{
            width: 100%;
            height: 100%;
            position: relative;
            .nei{
                width: 250px;
                height: 560px;
                position: absolute;
                right: 20px;
                list-style: none;
                li{
                    width: 250px;
                    height: 110px;
                    margin-left: -30px;
                    margin-top: 10px;
                    /* // border: solid 1px #000; */
                    .liao-img{
                        float: right;
                        width: 45px;
                        height: 45px;
                        border-radius: 30px;
                    }
                    .liao-xin{
                        width: 100px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        float: left;
                        background-color: rgb(35, 165, 35);
                        color: white;
                        border-radius: 30px;
                        margin-top: 40px;
                        margin-left: 80px;
                    }
                    .shijian{
                        position: relative;
                        left: 15px;
                        top: 15px;
                        float: left;
                        color: #ccc;
                    }
                }
            }
        }
        .fa{
            width: 372px;
            height: 50px;
            position: absolute;
            bottom: 1px;
            background-color: #e4e7e8;
            .yuyin{
                width: 30px;
                height: 30px;
                position: absolute;
                left: 5px;
                top: 10px;
            }
            .shu{
                width: 210px;
                height: 30px;
                position: absolute;
                left: 40px;
                top: 10px;
                background-color: white;
                border: none;
                border-radius: 10px;
            }
            .xiao{
                width: 20px;
                height: 20px;
                position: absolute;
                right: 38px;
                top: 15px;
            }
            .xiang{
                width: 25px;
                height: 25px;
                position: absolute;
                right: 5px;
                top: 13px;
            }
            .song{
                position: absolute;
                right: 67px;
                top: 10px;
                width: 50px;
                height: 30px;
                background-color: rgb(25, 224, 25);
                color: white;
                border: none;
                border-radius: 10px;
            }
        }
    }
   .hui{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 8px;
    left: 20px;
   }
</style>
